import React from 'react'
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    ActivityIndicator,
    Button,
    FlatList,
    Image,
    ImageBackground,
    Modal,
    Picker,
    TextInput,
    TouchableOpacity
  } from 'react-native';

let Styles = StyleSheet.create({
    searchBox: {
        borderColor: 'gray', 
        borderBottomWidth: 1 ,  
        alignItems : "center",
        alignContent: "center",
        height : 80
    },
    search : {
        borderColor: 'gray', 
        borderWidth: 1 , 
        height : 40,
        marginTop : 20,
        width : 280,
        flexDirection : "row",
        alignContent : "center",
        justifyContent : "space-evenly",
        borderRadius : 20,
        paddingLeft : 10
    },
    searchText : {
        height: 40, 
        width: 250,
        alignContent : "center",
    },
    searchImg : {
        height : 30,
        width : 30,
        marginTop :5
    },
    flatList : { 
        width : 340,
        marginTop : 10
    },
    listItem : {
        marginLeft: 10,
        width : 320,
        height : 200,
        borderColor: 'gray', 
        borderBottomWidth: 1,
        alignItems : 'center',
        flexDirection : 'row',
        justifyContent : 'space-between'
    },
    listItem_image : {
        width : 120,
        height : 156
    },
    listItem_noval : {
        width : 195,
        height : 156
    },
    listItem_title : {
        fontSize: 18,
        fontWeight : "bold",

    },
    listItem_author : {
        fontSize: 12,
        color : "#7a7374"
    },
    listItem_introduce : {
        fontSize : 14,
        color : "rgb(75,78,42)",
        paddingLeft : 10
    },
    kindBox : {
        height : 130,
        borderColor: 'gray', 
        borderBottomWidth: 1,
    },
    kindFlo : {
        height : 50,
        flexDirection : "row",
        justifyContent : "space-between"
    },
    kind : {
        width : 160,
        flexDirection : "row",
        paddingTop : 8
    },
    kingImg : {
        width: 17,
        height : 17,
        marginTop : 6,
        marginLeft : 20
    },
    kinds : {
        fontSize : 19,
        fontFamily : "SimSun",
        color : "rgba(0,0,0,0.5)",
        marginLeft : 5
    },
    kindTitle : {
        fontSize : 20,
        fontWeight : "bold",
        color : "rgba(0,0,0,0.5)"
    },
    introTitle : {
        fontSize : 20,
        fontWeight : "bold",
        color : "rgba(0,0,0,0.5)",
        marginTop : 10
    }
});


function HomeScreen({ navigation }) {
    const [host, setHost] = React.useState("http://192.168.129.43:3000");
    const [value, onChangeText] = React.useState('');
    const [blur, onBlur] = React.useState(false);//失去焦点时间，判断是否可以发送
    const [novalName, setNovalName] = React.useState("斗罗大陆II 绝世唐门");
    const [author, setAuthor] = React.useState();
    const [introduce, setIntro] = React.useState("这里没有魔法，没有斗气，没有武术，却有武魂。唐门创立万年之后的斗罗大陆上，唐门式微。一代天骄横空出世，新一代史莱克七怪能否重振唐门，谱写一曲绝世唐门之歌？百万年魂兽，手握日月摘星辰的死灵圣法神，导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。唐门暗器能否重振雄风，唐门能否重现辉煌，一切尽在绝世唐门！");
    const [imagePath, setImgPath] = React.useState('../asserts/tang1.jpg');
    const [kindID, setKindId] = React.useState(1);
    const [listData, chListData] = React.useState([]);

    function getData(){
        fetch(host + "/getBooks").then(res => {
            return res.json();
        }).then(res => {
            chListData(res);
        });
    }
    
    getData();

    function _onBlur(){
        let str = value.replace(/(^\s*)|(\s*$)/g, "");
        if(!("" == str)){
            //可以发送请求
            onBlur(true);
        }else{
            //不可发送请求
            onBlur(false);
        }
    }

    //列表项点击事件
    function _touchableOpacityPress(data){
        navigation.navigate('Details',{
            data,
            host
        });
    }
    
    //列表项
    function _renderItem(data){
        return(
            <TouchableOpacity style={Styles.listItem} onPress={()=>{_touchableOpacityPress(data.item)}}>
                <Image source={require('../asserts/tang1.jpg')} style={Styles.listItem_image}></Image>
                <View style={Styles.listItem_noval}>
                    <Text style={Styles.listItem_title} numberOfLines={6} ellipsizeMode="tail">   {data.item.novalName}</Text>
                    <Text style={Styles.listItem_author}>        作者：{data.item.author}</Text>
                    <Text style={Styles.listItem_introduce} numberOfLines={6} ellipsizeMode="tail">       简介：{data.item.introduce}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    function _ListHeaderComponent(){
        return (
            <View>
                <View style={Styles.kindBox}>
                    <Text style={Styles.kindTitle}>类别：</Text>
                    {/* 第一层 */}
                    <View style={Styles.kindFlo}>
                        
                        <TouchableOpacity style={Styles.kind}>
                            <Image source={require('../asserts/sword.png') } style={Styles.kingImg}></Image>
                            <Text style={Styles.kinds}>武侠仙侠</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={Styles.kind}>
                            <Image source={require('../asserts/taiji.png') } style={Styles.kingImg}></Image>
                            <Text style={Styles.kinds}>奇幻玄幻</Text>
                        </TouchableOpacity>
                        
                    </View>
                    {/* 第二层 */}
                    <View style={Styles.kindFlo}>
                        <TouchableOpacity style={Styles.kind}>
                            <Image source={require('../asserts/jun.png') } style={Styles.kingImg}></Image>
                            <Text style={Styles.kinds}>历史军事</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={Styles.kind}>
                            <Image source={require('../asserts/more.png') } style={Styles.kingImg}></Image>
                            <Text style={Styles.kinds}>更多</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <Text style={Styles.introTitle}>
                    推荐：
                </Text>
            </View>
        )
    }

    

    return (
      <View style={{ flex:1 }}>
            {/* 顶部搜索框 */}
            <View style={Styles.searchBox}>
                <View style={Styles.search}>
                    <Image source={require('../asserts/search.png')} style={Styles.searchImg}></Image>
                    <TextInput style={Styles.searchText} placeholder="请输入书名" 
                        onChangeText={text => onChangeText(text)} value={value}
                        onBlur={_onBlur}/>
                </View>
            </View>
            {/* 内容框 */}
            <View style={{ flex:9, alignItems : "center" }}>
                <FlatList data={listData} renderItem={_renderItem} ListHeaderComponent={_ListHeaderComponent}
                    keyExtractor={(item,index)=> index + ""} style={Styles.flatList}></FlatList>
            </View>
      </View>
    );
}
export default HomeScreen;